<template>
  <div>
    <HelloWord />
    <!-- 这里演示参数传递 -->
    <Mycomponent :title="title" :content="content" :names="names" :callback="callback" @onEvent="receiveMessage"/>
    <p>receive from child:{{ receivedMsg }}</p>
    <!-- 这里展示生命周期 -->
    <MyComponent1/>
    <!-- 这里演示网络请求 -->
    <HttpRequest/>
    <!-- 路由演示 -->
     <RouterTest/>
     <!-- 演示状态管理 -->
      <p>{{ $store.state.counter }}</p>
      <p>{{ counter }}</p>
      <button @click="addClickHandle(10)">增加</button>
      <p  v-yellow>{{ message }}</p>
      <p>{{ $store.state.message }}</p>
      <button @click="addClickHandleMsg">Change</button>
      <button @click="addClickHandleMsg1">Change</button>
      <!-- 演示自定义属性 -->
    <CustomCommend/>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref,computed, watch } from "vue";
import HelloWord from "./components/HelloWorld.vue";
import Mycomponent from "./components/Mycomponent.vue";
import MyComponent1 from "./components/MyComponent1.vue";
import HttpRequest from "./components/HttpRequest.vue";
import RouterTest from "./components/RouterTest.vue";
import CustomCommend from "./components/CustomCommend.vue";

import { useStore } from "vuex";

const title = ref("this is a title");
const content = ref("this is a content");
const names = ref(["James","Jack","Tom"]);

//状态管理
const store = useStore();
const counter = computed(()=>store.getters.getCounter);
const message = computed(()=>store.getters.getMessage);

const addClickHandle = (num)=>{
  store.commit("addCounter",10);
}

const addClickHandleMsg = ()=>{
    store.commit("setMessage","this is a new message");
}

const addClickHandleMsg1 = ()=>{
    store.dispatch("setMessage"); //调用store中的action
}

//监听器
watch(message,(newValue,oldValue)=>{
    console.log(oldValue,newValue);
});

const callback = (name)=>{
  console.log(name);
}

const receivedMsg = ref("");

const receiveMessage = (data)=>{
  receivedMsg.value = data;
};

onMounted(()=>{
    setInterval(()=>{
        title.value = "this is a title" + Math.random();
        content.value = "this is a content" + Math.random();
    },1000)
})
</script>
